<!-- MAIN CONTENT -->
<div id="content">
  <div class="row">
    <sa-big-breadcrumbs [items]="['Forms', 'Validation Sample look']" icon="pencil-square-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    <sa-stats></sa-stats>
  </div>


  <div class="alert alert-block alert-info" dismisser="">
    <h4 class="alert-heading">Please Note!</h4>

    <p>
      This page only shows various form element states for error and success. For a full list of error validations and
      examples click on the link below to go to the <strong>Smart Form Layouts</strong> page
    </p>
    <br>
    <a [routerLink]="['../layouts']" class="btn btn-primary"><strong><i class="fa fa-arrow-circle-right"></i> Form Layouts
      Page </strong></a>
  </div>

  <!-- widget grid -->
  <sa-widgets-grid>

    <!-- row -->
    <div class="row">

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false">
          <!-- widget options:
              usage: <sa-widget [editbutton]="false">

              [colorbutton]="false"
              [editbutton]="false"
              [togglebutton]="false"
              [deletebutton]="false"
              [fullscreenbutton]="false"
              [custombutton]="false"
              [collapsed]="true"
              [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-exclamation txt-color-red"></i> </span>

            <h2>Error States </h2>

          </header>

          <!-- widget div-->
          <div>


            <!-- widget content -->
            <div class="widget-body no-padding">

              <!-- Error states for elements -->
              <form class="smart-form">
                <header>Error states for elements</header>

                <fieldset>
                  <section>
                    <label class="label">Text input</label>
                    <label class="input state-error">
                      <input type="text">
                    </label>

                    <div class="note note-error">This is a required field.</div>
                  </section>

                  <section>
                    <label class="label">File input</label>

                    <div class="input input-file state-error">
                      <span class="button"><input type="file" id="file2" onchange="this.parentNode.nextSibling.value = this.value">Browse</span><input type="text" readonly>
                    </div>
                    <div class="note note-error">File size must be less than 3Mb.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Select</label>
                    <label class="select state-error">
                      <select>
                        <option value="0">Choose name</option>
                        <option value="1">Alexandra</option>
                        <option value="2">Alice</option>
                        <option value="3">Anastasia</option>
                        <option value="4">Avelina</option>
                      </select>
                      <i></i>
                    </label>

                    <div class="note note-error">You must select an option.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Textarea</label>
                    <label class="textarea state-error">
                      <textarea rows="3"></textarea>
                    </label>

                    <div class="note note-error">This is a required field.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Radios</label>

                    <div class="row">
                      <div class="col col-4">
                        <label class="radio state-error"><input type="radio" name="radio"><i></i>Alexandra</label>
                        <label class="radio state-error"><input type="radio" name="radio"><i></i>Alice</label>
                      </div>
                      <div class="col col-4">
                        <label class="radio state-error"><input type="radio" name="radio"><i></i>Avelina</label>
                        <label class="radio state-error"><input type="radio" name="radio"><i></i>Basilia</label>
                      </div>
                      <div class="col col-4">
                        <label class="radio state-error"><input type="radio" name="radio"><i></i>Cassandra</label>
                        <label class="radio state-error"><input type="radio" name="radio"><i></i>Clemencia</label>
                      </div>
                    </div>
                    <div class="note note-error">You must select one option.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Checkboxes</label>

                    <div class="row">
                      <div class="col col-4">
                        <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Alexandra</label>
                        <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Alice</label>
                      </div>
                      <div class="col col-4">
                        <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Avelina</label>
                        <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Basilia</label>
                      </div>
                      <div class="col col-4">
                        <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Cassandra</label>
                        <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Clemencia</label>
                      </div>
                    </div>
                    <div class="note note-error">You must select at least one option.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <div class="row">
                    <section class="col col-5">
                      <label class="label">Toggles based on radios</label>
                      <label class="toggle state-error"><input type="radio" name="radio-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Alexandra</label>
                      <label class="toggle state-error"><input type="radio" name="radio-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Anastasia</label>
                      <label class="toggle state-error"><input type="radio" name="radio-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Avelina</label>

                      <div class="note note-error">You must select one option.</div>
                    </section>

                    <div class="col col-2"></div>

                    <section class="col col-5">
                      <label class="label">Toggles based on checkboxes</label>
                      <label class="toggle state-error"><input type="checkbox" name="checkbox-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Cassandra</label>
                      <label class="toggle state-error"><input type="checkbox" name="checkbox-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Clemencia</label>
                      <label class="toggle state-error"><input type="checkbox" name="checkbox-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Desiderata</label>

                      <div class="note note-error">You must select at least one option.</div>
                    </section>
                  </div>
                </fieldset>

                <footer>
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button type="button" class="btn btn-default" onclick="window.history.back();">Back</button>
                </footer>
              </form>
              <!--/ Error states for elements -->

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false">
          <!-- widget options:
              usage: <sa-widget [editbutton]="false">

              [colorbutton]="false"
              [editbutton]="false"
              [togglebutton]="false"
              [deletebutton]="false"
              [fullscreenbutton]="false"
              [custombutton]="false"
              [collapsed]="true"
              [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-check txt-color-green"></i> </span>

            <h2>Success States </h2>

          </header>

          <!-- widget div-->
          <div>

            <!-- widget content -->
            <div class="widget-body no-padding">

              <!-- Success states for elements -->
              <form class="smart-form">
                <header>Success states for elements</header>

                <fieldset>
                  <section>
                    <label class="label">Text input</label>
                    <label class="input state-success">
                      <input type="text">
                    </label>

                    <div class="note note-success">This is a required field.</div>
                  </section>

                  <section>
                    <label class="label">File input</label>

                    <div class="input input-file state-success">
                      <span class="button"><input type="file" id="file" onchange="this.parentNode.nextSibling.value = this.value">Browse</span><input type="text" readonly>
                    </div>
                    <div class="note note-success">This is a required field.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Select</label>
                    <label class="select state-success">
                      <select>
                        <option value="0">Choose name</option>
                        <option value="1">Alexandra</option>
                        <option value="2">Alice</option>
                        <option value="3" selected>Anastasia</option>
                        <option value="4">Avelina</option>
                      </select>
                      <i></i>
                    </label>

                    <div class="note note-success">Thanks for your selection.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Textarea</label>
                    <label class="textarea state-success">
                      <textarea rows="3"></textarea>
                    </label>

                    <div class="note note-success">Thanks for your text.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Radios</label>

                    <div class="row">
                      <div class="col col-4">
                        <label class="radio state-success"><input type="radio" name="radio"><i></i>Alexandra</label>
                        <label class="radio state-success"><input type="radio" name="radio"><i></i>Alice</label>
                      </div>
                      <div class="col col-4">
                        <label class="radio state-success"><input type="radio" name="radio" checked><i></i>Avelina</label>
                        <label class="radio state-success"><input type="radio" name="radio"><i></i>Basilia</label>
                      </div>
                      <div class="col col-4">
                        <label class="radio state-success"><input type="radio" name="radio"><i></i>Cassandra</label>
                        <label class="radio state-success"><input type="radio" name="radio"><i></i>Clemencia</label>
                      </div>
                    </div>
                    <div class="note note-success">Thanks for your selection.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <section>
                    <label class="label">Checkboxes</label>

                    <div class="row">
                      <div class="col col-4">
                        <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Alexandra</label>
                        <label class="checkbox state-success"><input type="checkbox" name="checkbox" checked><i></i>Alice</label>
                      </div>
                      <div class="col col-4">
                        <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Avelina</label>
                        <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Basilia</label>
                      </div>
                      <div class="col col-4">
                        <label class="checkbox state-success"><input type="checkbox" name="checkbox" checked><i></i>Cassandra</label>
                        <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Clemencia</label>
                      </div>
                    </div>
                    <div class="note note-success">Thanks for your selection.</div>
                  </section>
                </fieldset>

                <fieldset>
                  <div class="row">
                    <section class="col col-5">
                      <label class="label">Toggles based on radios</label>
                      <label class="toggle state-success"><input type="radio" name="radio-toggle" checked><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Alexandra</label>
                      <label class="toggle state-success"><input type="radio" name="radio-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Anastasia</label>
                      <label class="toggle state-success"><input type="radio" name="radio-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Avelina</label>

                      <div class="note note-success">Thanks for your selection.</div>
                    </section>

                    <div class="col col-2"></div>

                    <section class="col col-5">
                      <label class="label">Toggles based on checkboxes</label>
                      <label class="toggle state-success"><input type="checkbox" name="checkbox-toggle" checked><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Cassandra</label>
                      <label class="toggle state-success"><input type="checkbox" name="checkbox-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Clemencia</label>
                      <label class="toggle state-success"><input type="checkbox" name="checkbox-toggle"><i data-swchon-text="ON" data-swchoff-text="OFF"></i>Desiderata</label>

                      <div class="note note-success">Thanks for your selection.</div>
                    </section>
                  </div>
                </fieldset>

                <footer>
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button type="button" class="btn btn-default" onclick="window.history.back();">Back</button>
                </footer>
              </form>
              <!--/ Success states for elements -->

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->

  </sa-widgets-grid>
  <!-- end widget grid -->


</div>
<!-- END MAIN CONTENT -->
